<template>
    <div class="container">
        <div class="box">
            <div class="top">
                <div>
                    <van-icon name="share" size="30px" @click="fanhui"/>
                    <span>考勤签到</span>
                </div>
                <van-row>
                    <van-col span="3">序</van-col>
                    <van-col span="7">学生姓名</van-col>
                    <van-col span="7">签到信息</van-col>
                    <van-col span="7">操作</van-col>
                </van-row>
            </div>
            <div class="content">
                <van-row v-for="item in tabledata">
                    <van-col span="3">{{ item.id }}</van-col>
                    <van-col span="7">{{ item.name }}</van-col>
                    <van-col span="7">{{ item.isselect ? '已签到' : '未签到' }}</van-col>
                    <van-col span="7">
                        <span class="span-fen" ref="spanRef" :data-color="item.isselect" @click="sapnclick(item.id)">{{
                            item.isselect ? '取消签到' : '签到' }}</span>
                    </van-col>
                </van-row>

            </div>
        </div>
        <div class="bottom">
            <div>
                思想品德&emsp;<span>|&nbsp;{{ total }}/{{ total }}</span>
            </div>
            <div @click="alldelete">
                一键签到
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from 'vue'
import { singinApi } from '@/api/adminAPi'
import adminStore from '@/store/admin'
import { useRouter } from 'vue-router';
const router = useRouter();
const myadminStore = adminStore()
const total = ref(0)
const tabledata = ref([])
const spanRef = ref()
onBeforeMount(async () => {
    myadminStore.setUserInfo(false)
    let ret = await singinApi()
    if (ret.code === 0) {
        total.value = ret.total
        tabledata.value = ret.data
    }
})
// 签到操作
const sapnclick = (id) => {

    tabledata.value = tabledata.value.map(item => {
        if (item.id === id) {
            item.isselect = !item.isselect
            return item
        }
        return item
    })
    spanRef.value.forEach((item, index) => {
        if (index + 1 === id) {
            if (item.dataset.color === 'true') {
                item.classList.remove(...item.classList)
                item.classList.add('span-blue');
            }
            else if (item.dataset.color === 'false') {
                item.classList.remove(...item.classList)
                item.classList.add('span-fen');
            }
        }
    })

}
const alldelete = () => {
    tabledata.value = tabledata.value.map(item => {
        item.isselect = 'true'
        return item
    })
    spanRef.value.forEach((item, index) => {
        item.classList.remove(...item.classList)
        item.classList.add('span-fen');

    })
}
const fanhui = ()=>{
    router.push('/');
    myadminStore.setUserInfo(true)
}
</script>
<style lang='scss' scoped>
.span-fen {
    padding: 5px;
    background-color: #F89AD8;
    border-radius: 5px;
    color: white;

}

.span-blue {
    padding: 5px;
    padding-left: 22px;
    padding-right: 22px;
    background-color: #6CB6FF;
    border-radius: 5px;
    color: white;

}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    .box {
        padding: 10px;
        flex: 1;
        .top {
            position: sticky;
            top: 0;
            background-color: #f7f3f3;
            div {
                height: 50px;
                display: flex;
                align-items: center;

                z-index: 1;
                opacity: 1;

                .van-icon {
                    transform: scaleX(-1);
                }

                span {
                    font-size: 20px;
                    font-weight: 600;
                }
            }

            .van-row {
                background-color: #6CB6FF;
                border-radius: 5px 5px 0 0;
                font-size: 18px;
                color: #e8dddd;
                font-weight: 500px;
                position: sticky;
                top: 60px;
                z-index: 3;

                :deep(.van-col) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .content {
            .van-row {
                font-size: 18px;
                color: black;
                height: 50px;
                font-weight: 500px;

                :deep(.van-col) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                &:nth-child(even) {
                    background-color: #E9F4FF;
                }
            }
        }
    }

    .bottom {
        height: 60px;
        display: flex;
        justify-content: left;
        position: sticky;
        bottom: 0;

        div {
            width: 50%;

            &:nth-child(1) {
                font-size: 20px;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f7f3f3;
                span {
                    font-size: 14px;
                    color: #74AAD2;
                }
            }

            &:nth-child(2) {
                font-size: 20px;
                font-weight: 700;
                color: white;
                background-color: #6CB6FF;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>